<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.active{
				background-color: darkgray;
			}
		</style>
	</head>
	<body>
		<div id="booklist">
			<h1>{{message}}</h1>
			<table border="1px" cellspacing=0 width="500px">
				<tr>
					<td width="10%"></td>
					<td width="10%">ID</td>
					<td width="30%">书籍名称</td>
					<td width="15%">出版日期</td>
					<td width="10%">价格</td>
					<td width="15%">购买数量</td>
					<td width="10%">操作</td>
				</tr>
				<tr v-for='(book, index) in list' @click="checkTr(index, book)" :key="book.id" :class="{active: book.isActive}">
					<td><input type="checkbox" :checked='book.isChecked'/></td>
					<td>{{book.id}}</td>
					<td>{{book.name}}</td>
					<td>{{book.date}}</td>
					<td>{{book.money | formatPrice}}</td>
					<td><btn :book="book"></btn></td>
					<td><button @click="ydelete(index)">移除</button></td>
				</tr>
			</table>
			<h2>总价格：{{total | formatPrice}}</h2>
			<button type="button" @click="buyId()">提交</button>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let Component = {
				data: function(){
					return {}
				},
				props: {book:Object},
				methods:{
					minus :(book) => book.num--,
					add :(book) => book.num++
					},
				template: ` <div>
								<button @click="add(book)">+</button>
									{{book.num}}
								<button @click="minus(book)" :disabled="book.num < 2">-</button>
							</div>
							`
			}
			var booklist = new Vue({
				el: "#booklist",
				data: {
					message:"",
					list: [
						{isChecked: false, id: 1, date: '2020-1', money: 20, num: 1, name: '《Java从入门到放弃》', isActive: false},
						{isChecked: false, id: 2, date: '2019-1', money: 30, num: 1, name: '《PHP从入门到放弃》', isActive: false},
						{isChecked: false, id: 3, date: '2018-1', money: 40, num: 1, name: '《Python从入门到放弃》', isActive: false},
						{isChecked: false, id: 4, date: '2017-1', money: 10, num: 1, name: '《什么都是从入门到放弃》', isActive: false}
					]
				},
				components: {
					'btn':Component
				},
				computed: {
					total: function(){
						return this.list.reduce((returnVal, nextItem) => returnVal + nextItem.num * nextItem.money, 0)
					},
					// formatPrice: function(){
					// 	// return function(money){
					// 	// console.log(money);
					// 	// return '￥' + money.toFixed(2);
					// 	// }
					// 	return money => '￥' + money.toFixed(2);
					// }
				},
				methods: {
					add: (book, $event) => book.num++,
					minus: (book, $event) => book.num--,
					ydelete: function(index, $event){
						this.list.splice(index, 1);
						if(this.list.length === 0){
							this.message = "没有商品";
						}
					},
					<!--点击行触发函数-->
					checkTr: function(index, book, $event){
						if(book.isActive === false){
							book.isActive = true;
							book.isChecked = true;
							
						}else{
							book.isActive = false;
							book.isChecked = false;
						}
					},
					<!--点击提交按钮显示勾选的id-->
					buyId: function(){
						alert(this.listid);
					}
				},
				filters: {
					formatPrice: money => '￥' + money.toFixed(2)
				},
				created(){
					console.log("created")
				},
				mounted(){
					console.log("mounted")
				},
				updated(){
					console.log("updated")
				}
			})
		</script>
	</body>
</html>
